html {
    // 让滚动条以缓慢的形式来进行滚动
    scroll-behavior: smooth;
}

// Bootstrap导航条
.navbar {
    background-color: #111111;
    margin: 0;
    padding: 40px 0;
    border-radius: 0;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 99;

    .logo {
        text-transform: uppercase;
        font-size: 20px;
        color: white;
    }

    .nav {
        li {
            border: 3px solid transparent;
            transition: all linear .2s;

            a {
                text-transform: uppercase;
                font-size: 18px;
                color: white;
                // border: 3px solid transparent;

            }

            &:hover {
                border-bottom: 3px solid #292929;
            }
        }

        // 当前屏幕(770px) <= 770px max-width
        @media screen and (max-width:770px) {
            .nav {
                li {
                    a {
                        text-align: center;
                    }
                }
            }
        }
    }
}

// banner
.banner {
    background: #111111;
    text-align: center;
    padding: 154px 0 82px;

    .title {
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 40px;
        color: #999999;

        span {
            font-family: OSBold;
            color: #fcac45;
        }
    }

    .desc {
        font-family: OSLight;
        font-size: 22px;
        color: #e7e7e7;
        margin-bottom: 270px;

        span {
            font-family: OSBold;
        }
    }

    .more {
        display: inline-block;
        width: 46px;
        height: 46px;
        line-height: 40px;
        text-align: center;
        font-size: 17px;
        color: white;
        border-radius: 100%;
        border: 2px solid #c0c0c0;
        _display: inline;
        zoom: 1;
        overflow: hidden;
    }
}

// about
.about {
    background-color: #fff;
    width: 100%;
    // height: 610px;
    padding: 98px 0 0;

    .middle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about_lt {
        img {
            display: block;
            width: 740px;
            height: 510px;
        }
    }

    .about_rt {
        width: 412px;
        transform: translateX(-33px);

        .head {
            text-transform: uppercase;
            font-size: 20px;
            color: #636363;
        }

        .header {
            height: 64px;
            text-transform: uppercase;
            font-size: 30px;
            color: #4e4e4e;
            margin-bottom: 28px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            span:first-child {
                border-bottom: 4px solid #fcac45;
                padding-bottom: 18px;
            }

            span:last-child {
                font-family: OSBold;
            }
        }

        .text {
            font-size: 18px;
            color: #c4c4c4;
            margin-bottom: 42px;
        }

        .ordinal {
            li {
                line-height: 50%;

                &:nth-child(2) {
                    margin: 16px 0;
                }

                &:nth-child(3) {
                    margin-bottom: 48px;
                }

                span {
                    height: 24px;
                    line-height: 24px;
                    font-size: 16px;

                    &:first-child {
                        color: #5a5a5a;
                        margin-right: 10px;
                    }

                    &:nth-child(2) {
                        font-family: OSBold;
                        color: #5a5a5a;
                    }

                    &:last-child {
                        font-family: OSItalic;
                        color: #919191;
                    }
                }
            }
        }

        .btn {
            width: 192px;
            height: 45px;
            background-color: white;
            border: 1px solid #7f7f7f;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 40px;

            span:first-child {
                height: 45px;
                line-height: 45px;
                font-size: 14px;
                color: #5a5a5a;
                margin: 10px;
            }

            span:last-child {
                height: 45px;
                line-height: 49px;
                text-transform: uppercase;
                font-size: 12px;
                color: #6c6c6c;
            }
        }

    }

    @media screen and (max-width:1158px) {
        .about_lt {
            img {
                object-fit: contain;
            }
        }
    }

    @media screen and (max-width:770px) {
        .about_lt {
            display: none;
        }

        .about_rt {
            width: 80%;
            transform: translateX(0);
        }
    }
}

// team
.team {
    width: 100%;
    // height: 726px;
    background-color: #070707;
    padding: 94px 0 80px;

    .middle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .head {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 40px;
        color: #fff;
        margin-bottom: 24px;

        span {
            font-family: OSBold;
        }
    }

    .shape {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 94px;

        img {
            object-fit: contain;
        }
    }

    .list {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 68px;

        .item {
            width: 23%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .avatar {
            width: 128px;
            height: 128px;
            background-color: #d7d7d7;
            border-radius: 100%;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content {
            text-align: center;

            .title {
                font-size: 26px;
                color: #fff;
            }

            .subtitle,
            .description {
                font-size: 16px;
                color: #dedede;
            }

            .subtitle {
                margin-bottom: 32px;
            }
        }
    }

    .radio {
        width: 100%;
        text-align: center;

        span {
            display: inline-block;
            width: 9px;
            height: 9px;
            background-color: #fff;
            margin: 0 7.5px;

            &:hover {
                background-color: #fcac45;
            }
        }
    }

    @media screen and (max-width: 910px) {
        .list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;

            .item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .content {
                text-align: left;
                margin-left: 20px;

                .subtitle {
                    margin-bottom: 16px;
                }
            }
        }
    }

    @media screen and (max-width: 718px) {
        .list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;

            .item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .content {
                text-align: center;
                margin-left: 20px;

                .subtitle {
                    margin-bottom: 16px;
                }

                .description {
                    margin-bottom: 32px;
                }
            }
        }
    }
}

// services
.services {
    width: 100%;
    // height: 726px;
    background-color: #fff;
    padding: 94px 0;

    .middle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .head {
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 44px;
        color: #222222;
        margin-bottom: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        span {
            font-family: OSBold;
        }
    }

    .shape {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 34px;

        img {
            object-fit: contain;
        }
    }

    .para {
        width: 90%;
        text-align: center;
        font-size: 18px;
        font-family: OSLight;
        color: #a7a7a7;
        margin-bottom: 124px;
    }

    .list {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 68px;

        .item {
            width: 23%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .avatar {
            width: 113px;
            height: 113px;
            background-color: #fff;
            border: 6px solid #fcac45;
            border-radius: 100%;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content {
            text-align: center;

            .title {
                text-transform: uppercase;
                font-family: OSBold;
                font-size: 26px;
                color: #222222;
                margin-bottom: 14px;
            }

            .description {
                font-size: 16px;
                color: #676767;
            }
        }
    }

    @media screen and (max-width: 910px) {
        .list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;

            .item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .content {
                text-align: left;
                margin-left: 20px;

                .subtitle {
                    margin-bottom: 16px;
                }
            }
        }
    }

    @media screen and (max-width: 810px) {
        .list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;

            .item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .content {
                text-align: center;
                margin-left: 20px;

                .subtitle {
                    margin-bottom: 16px;
                }

                .description {
                    margin-bottom: 32px;
                }
            }
        }
    }
}

// clients
.clients {
    width: 100%;
    // height: 726px;
    background-color: #070707;
    padding: 94px 0;

    .middle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .head {
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 46px;
        color: #fff;
        margin-bottom: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        span {
            font-family: OSBold;
        }
    }

    .shape {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            object-fit: contain;
        }
    }

    .logos {
        margin: 88px 0;
    }

    .radio {
        width: 100%;
        text-align: center;

        span {
            display: inline-block;
            width: 9px;
            height: 9px;
            background-color: #fff;
            margin: 0 7.5px;

            &:hover {
                background-color: #fcac45;
            }
        }
    }

    @media screen and (max-width: 1000px) {
        .logos {
            img {
                object-fit: contain;
            }
        }
    }
}

// portfolio
.portfolio {
    width: 100%;
    // height: 726px;
    background-color: #fff;
    padding: 94px 0;

    .middle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .head {
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 40px;
        color: #898989;
        margin-bottom: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        span {
            font-family: OSBold;
            color: #222222;
        }
    }

    .shape {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 34px;

        img {
            object-fit: contain;
        }
    }

    .para {
        width: 90%;
        text-align: center;
        font-family: OSLight;
        font-size: 18px;
        color: #767676;
        margin-bottom: 100px;
    }

    .box {
        .subject {
            display: flex;
            justify-content: space-between;
            padding: 0 2em;
            margin-bottom: 1.5em;

            .left {
                text-transform: uppercase;
                font-size: 1.2em;
                font-family: OSBold;
            }

            .right {
                a {
                    display: inline-block;
                    padding: .1em 1em;
                    border-right: 1px solid #6c6c6c;
                    color: #6c6c6c;
                    text-transform: capitalize;
                    transition: all linear .3s;
                    font-family: OSLight;
                    text-decoration: none;

                    &:last-child {
                        border-right: 0px;
                        padding-right: 0px;
                    }

                    &:hover {
                        font-family: OSBold;
                        color: #222222;
                    }
                }
            }

            .select {
                display: none;
            }
        }

        .list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            .item {
                position: relative;
                margin: 1em .5em;
                overflow: hidden;

                &:hover .mask {
                    top: 0%;
                    opacity: 1;
                }


                .mask {
                    position: absolute;
                    left: 0;
                    top: -100%;
                    width: 100%;
                    height: 100%;
                    background: #222222;
                    text-align: center;
                    padding-top: 3em;
                    transition: all linear .3s;
                    opacity: 0;

                    h1 {
                        color: #fff;
                        font-size: 1.5em;
                    }

                    p {
                        color: #e7e7e7;
                        font-size: 1.2em;
                        margin-bottom: 2em;
                    }

                    .plus {
                        display: inline-block;
                        width: 1.8em;
                        height: 1.8em;
                        line-height: 1.6em;
                        text-align: center;
                        font-size: 2em;
                        border: 2px solid #fcac45;
                        border-radius: 100px;
                        overflow: hidden;
                        cursor: pointer;
                        color: #fcac45;
                    }
                }
            }
        }
    }

    @media screen and (max-width:560px) {
        .middle {
            .box {
                .subject {
                    .right {
                        display: none;
                    }

                    .select {
                        display: inline-block;
                    }
                }

                .list {
                    .item {
                        width: 80%;
                        margin: 0 auto 1em;
                        text-align: center;
                    }
                }


            }
        }
    }
}

// testimonials
.testimonials {
    width: 100%;
    // height: 726px;
    background-color: #070707;
    padding: 94px 0;

    .middle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .head {
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 40px;
        color: #fff;
        margin-bottom: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        span {
            font-family: OSBold;
        }
    }

    .shape {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 94px;

        img {
            object-fit: contain;
        }
    }

    .para {
        width: 90%;
        text-align: center;
        text-transform: uppercase;
        font-size: 18px;
        color: #e8e8e8;
    }

    .name {
        width: 80%;
        text-align: center;
        font-size: 22px;
        color: #b2b2b2;
        margin: 48px 0;

        span {
            font-family: OSLight;
        }
    }

    .radio {
        width: 100%;
        text-align: center;

        span {
            display: inline-block;
            width: 9px;
            height: 9px;
            background-color: #fff;
            margin: 0 7.5px;

            &:hover {
                background-color: #fcac45;
            }
        }
    }
}

// contact
.contact {
    width: 100%;
    // height: 726px;
    background-color: #fff;
    padding: 94px 0;

    .middle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .head {
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 40px;
        color: #898989;
        margin-bottom: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        span {
            font-family: OSBold;
            color: #222222;
        }
    }

    .shape {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 34px;

        img {
            object-fit: contain;
        }
    }

    .para {
        width: 82%;
        text-align: center;
        font-family: OSLight;
        font-size: 18px;
        color: #767676;
        margin-bottom: 86px;
    }

    .from {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        .name,
        .email {
            width: 48%;
            margin-bottom: 28px;

            label {
                font-size: 16px;
                color: #8d8d8d;

                span {
                    color: #db0000;
                }
            }

            .input_box {
                width: 100%;
                height: 40px;

                #name,
                #email {
                    width: 100%;
                    height: 100%;
                    border: 1px solid #999999;
                }
            }
        }

        .message {
            width: 100%;
            margin-bottom: 28px;

            label {
                font-size: 16px;
                color: #8d8d8d;

                span {
                    color: #db0000;
                }
            }

            .input_box {
                width: 100%;
                height: 162px;

                #text {
                    width: 100%;
                    height: 100%;
                    border: 1px solid #999999;
                }
            }

        }

        .btn {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: right;
            padding: 0;

            button {
                width: 22%;
                height: 100%;
                line-height: 100%;
                text-align: center;
                border: none;
                background-color: #fcac45;
                font-size: 16px;
                color: #fff;
            }
        }

        @media screen and (max-width:800px) {

            .name,
            .email {
                width: 100%;
            }

            .btn {
                justify-content: center;
            }
        }
    }
}

// footer
.footer {
    background-color: #222222;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 38px 0;

    .lt {
        p {
            font-family: OSLight;
            font-size: 14px;
            color: #6a6a6a;

            span {
                font-family: OSBold;
                color: #a9a9a9;
            }
        }
    }

    .rt {
        img {
            margin: 0 5px;
            object-fit: contain;
        }
    }

    @media screen and (max-width:710px) {
        & {
            flex-wrap: wrap;

            .lt,
            .rt {
                text-align: center;
                width: 100%;
            }

            .lt {
                margin-bottom: 20px;
            }
        }


    }
}

// 返回顶部
.up {
    width: 70px;
    height: 70px;
    position: fixed;
    right: 45px;
    bottom: 45px;

    a {
        width: 100%;
        height: 100%;

        &:hover {
            animation: up 1s;
        }

        @keyframes up {
            from {
                transform: scale3d(1, 1, 1);
            }

            30% {
                transform: scale3d(1.25, 0.75, 1);
            }

            40% {
                transform: scale3d(0.75, 1.25, 1);
            }

            50% {
                transform: scale3d(1.15, 0.85, 1);
            }

            65% {
                transform: scale3d(.95, 1.05, 1);
            }

            75% {
                transform: scale3d(1.05, .95, 1);
            }

            to {
                transform: scale3d(1, 1, 1);
            }
        }
    }
}